Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

VTAdmin: Initiate workflow details tab #16570

Merged
merged 11 commits into from
Aug 27, 2024
Merged

VTAdmin: Initiate workflow details tab #16570

merged 11 commits into from
Aug 27, 2024

Conversation

beingnoble03
Copy link
Member

@beingnoble03 beingnoble03 commented Aug 9, 2024 •
edited
Loading

Description

This PR adds a new tab Details which extracts the Workflow Show and Workflow Status output into structured UI elements. The Details tab includes

  • Summary: Gives the overall status of the workflow. Streams status (how many in running, copying, throttling, stopped, error phase), traffic status (whether reads or writes are switched), maximum vreplication lag. If switched, link to reverse workflow.
  • Streams: Info about each stream of the workflow. State, stream message, transaction timestamp, database name.
  • If in copying phase, progress of each table (i.e. Total Bytes, Bytes Copied, Total Rows, Rows Copied.)
  • Recent logs from each stream, each log entry with log type, stream state, update timestamp, log message, count.

Related Issue(s)

Checklist

  • "Backport to:" labels have been added if this change should be back-ported to release branches
  • If this change is to be back-ported to previous releases, a justification is included in the PR description
  • Tests were added or are not required
  • Did the new or modified tests pass consistently locally and on CI?
  • Documentation was added or is not required

Deployment Notes

@vitess-bot vitess-bot
Copy link
Contributor

vitess-bot bot commented Aug 9, 2024

Review Checklist

Hello reviewers! 👋 Please follow this checklist when reviewing this Pull Request.

General

  • Ensure that the Pull Request has a descriptive title.
  • Ensure there is a link to an issue (except for internal cleanup and flaky test fixes), new features should have an RFC that documents use cases and test cases.

Tests

  • Bug fixes should have at least one unit or end-to-end test, enhancement and new features should have a sufficient number of tests.

Documentation

  • Apply the release notes (needs details) label if users need to know about this change.
  • New features should be documented.
  • There should be some code comments as to why things are implemented the way they are.
  • There should be a comment at the top of each new or modified test to explain what the test does.

New flags

  • Is this flag really necessary?
  • Flag names must be clear and intuitive, use dashes (-), and have a clear help text.

If a workflow is added or modified:

  • Each item in Jobs should be named in order to mark it as required.
  • If the workflow needs to be marked as required, the maintainer team must be notified.

Backward compatibility

  • Protobuf changes should be wire-compatible.
  • Changes to _vt tables and RPCs need to be backward compatible.
  • RPC changes should be compatible with vitess-operator
  • If a flag is removed, then it should also be removed from vitess-operator and arewefastyet, if used there.
  • vtctl command output order should be stable and awk-able.

@vitess-bot vitess-bot bot added NeedsBackportReason If backport labels have been applied to a PR, a justification is required NeedsDescriptionUpdate The description is not clear or comprehensive enough, and needs work NeedsIssue A linked issue is missing for this Pull Request NeedsWebsiteDocsUpdate What it says labels Aug 9, 2024
@github-actions github-actions bot added this to the v21.0.0 milestone Aug 9, 2024
@beingnoble03 beingnoble03 changed the title vtadmin: Initiate workflow details tab VTAdmin: Initiate workflow details tab Aug 22, 2024
@beingnoble03 beingnoble03 added Type: Enhancement Logical improvement (somewhere between a bug and feature) Component: VTAdmin VTadmin interface and removed NeedsDescriptionUpdate The description is not clear or comprehensive enough, and needs work NeedsWebsiteDocsUpdate What it says NeedsIssue A linked issue is missing for this Pull Request NeedsBackportReason If backport labels have been applied to a PR, a justification is required labels Aug 22, 2024
@codecov Codecov
Copy link

codecov bot commented Aug 22, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 68.92%. Comparing base (81ed314) to head (ee97ac2).
Report is 15 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #16570      +/-   ##
==========================================
- Coverage   68.96%   68.92%   -0.04%     
==========================================
  Files        1562     1562              
  Lines      200730   200855     +125     
==========================================
+ Hits       138430   138436       +6     
- Misses      62300    62419     +119

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@beingnoble03
Copy link
Member Author

beingnoble03 commented Aug 25, 2024 •
edited
Loading

Screenshots for single stream:

image
image

Screenshots for multiple streams:

Screenshot 2024-08-26 at 10 11 14 AM Screenshot 2024-08-26 at 10 11 25 AM Screenshot 2024-08-26 at 10 10 46 AM Screenshot 2024-08-26 at 10 10 53 AM

@beingnoble03 beingnoble03 marked this pull request as ready for review August 25, 2024 06:16
@beingnoble03 beingnoble03 mentioned this pull request Aug 25, 2024
Closed
rohit-nayak-ps
rohit-nayak-ps reviewed Aug 27, 2024
View reviewed changes
Copy link
Contributor

@rohit-nayak-ps rohit-nayak-ps left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent work. Only issue I see atm is whether we load the tab upfront or lazily.

web/vtadmin/src/components/routes/workflow/Workflow.tsx
@@ -74,6 +75,7 @@ export const Workflow = () => {
<ContentContainer>
<TabContainer>
<Tab text="Streams" to={`${url}/streams`} count={streams.length} />
<Tab text="Details" to={`${url}/details`} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we load the Details info all the time? If so, we should only load on clicking the tab, since there are a large number of shards that could take a lot of time.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are loading the details info when we click on the tab.

@rohit-nayak-ps
Copy link
Contributor

We should figure out a way to dynamically load some of the details info like logs or streams in clusters with a very large number of shards. We can do that later once we have some experience in the field with the new UI. Just mentioning it here for future reference.

notfelineit
notfelineit reviewed Aug 27, 2024
View reviewed changes
web/vtadmin/src/components/routes/workflow/WorkflowDetails.tsx Outdated
return rows.map((row) => {
const reverseWorkflow = row.reverseWorkflow;
return (
<tr>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll want to supply a key here, since it's a mapped react component:

Suggested change
<tr>
<tr key={row.workflowData.workflow.name}>

or another unique identifier!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, thank you!

@rohit-nayak-ps rohit-nayak-ps merged commit 99720c8 into vitessio:main Aug 27, 2024
132 checks passed
venkatraju pushed a commit to slackhq/vitess that referenced this pull request Aug 29, 2024
@beingnoble03 @venkatraju
VTAdmin: Initiate workflow details tab (vitessio#16570)
4b78d47 
Signed-off-by: Noble Mittal <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@notfelineit notfelineit notfelineit approved these changes

@rohit-nayak-ps rohit-nayak-ps rohit-nayak-ps approved these changes

@ajm188 ajm188 Awaiting requested review from ajm188 ajm188 is a code owner

Assignees
No one assigned
Labels
Component: VTAdmin VTadmin interface Type: Enhancement Logical improvement (somewhere between a bug and feature)
Projects
None yet
Milestone
v21.0.0
Development

Successfully merging this pull request may close these issues.

VTAdmin: Workflow Details tab
3 participants
@beingnoble03 @rohit-nayak-ps @notfelineit